<template>
    <div class="home" :class="{ 'is-mobile': $isMobile }">

        <div class="home-focus">
            <today-focus></today-focus>
            <today-news></today-news>
        </div>

        <div class="home-content">

            <div class="home-content-left">

                <!-- 领导成员 -->
                <!-- 协会概况 -->
                <div class="content-item">

                    <div class="content-item-header">
                        <div v-for="item in leadsInfos" class="cms-news-title" :class="{ active: leadId === item.id }"
                            :key="item.id" @click="leadId = item.id"> {{ item.title }}</div>
                    </div>
                    <div class="content-item-content">
                        <cms-leader v-if="leadId === leadsInfos[0].id"></cms-leader>

                        <template v-if="leadId === leadsInfos[1].id">
                            <cms-content :list="leadsInfos[1].list" v-if="$isMobile"></cms-content>
                            <cms-content-poster :list="leadsInfos[1].list" v-else></cms-content-poster>
                        </template>

                    </div>
                </div>

                <!-- 分支机构 -->
                <!-- 合作单位 -->
                <div class="content-item">
                    <div class="content-item-header">
                        <div v-for="item in linksInfos" class="cms-news-title" :class="{ active: linkId === item.id }"
                            :key="item.id" @click="linkId = item.id"> {{ item.title }}</div>
                    </div>

                    <div class="another-link-bg" v-if="!$isMobile">
                        <img src="../../assets/another-link.png" alt="">
                    </div>

                    <div class="content-item-content">
                        <cms-content v-for="item in linksInfos" :list="item.list" v-if="linkId === item.id"
                            :key="item.id"></cms-content>
                    </div>
                </div>
            </div>

            <div class="home-content-right" v-if="!$isMobile">
                <award-list></award-list>
            </div>
        </div>

        <div class="vip">
            <div class="vip-content vip-desc" @click="handleTopic('topic-teacher')"></div>
            <div class="vip-content vip-docs" @click="handleTopic('topic-material')"></div>
            <div class="vip-content vip-video" @click="handleTopic('topic-lesson')"></div>
            <div class="vip-content vip-result" @click="handleTopic('topic-certificate')"></div>
        </div>
    </div>
</template>

<script>
import todayFocus from "./components/toady-focus.vue";
import TodayNews from './components/today-news.vue';
import awardList from "./components/award-list.vue";
import cmsContent from "./components/cms-content.vue";
import cmsContentPoster from "./components/cms-content-poster.vue";
import cmsLeader from "./components/cms-leader.vue";

import linkJson from "./assets/links";

const leadId = 'leadId';
const linkId = 54

export default {
    components: {
        todayFocus,
        TodayNews,
        awardList,
        cmsContent,
        cmsContentPoster,
        cmsLeader,
    },
    name: "home",
    data() {
        return {
            leadsInfos: [
                {
                    title: '领导成员',
                    id: leadId,
                    list: linkJson
                },
                {
                    title: "协会概括",
                    id: 7, // 协会概括-工作动态
                    list: []
                }
            ],

            leadId,


            linksInfos: [
                {
                    title: '分支机构', // 分支机构-机构简介
                    id: linkId,
                    list: []
                },
                {
                    title: "合作单位",
                    id: 'hezuo',
                    list: linkJson
                }
            ],

            linkId,
        };
    },

    computed: {
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {

            this.getHomeContent();
        },

        async getHomeContent() {
            const arr = [];
            this.leadsInfos.forEach((item) => {
                if (typeof item.id === 'number') {
                    arr.push(item.id)
                }
            })

            this.linksInfos.forEach((item) => {
                if (typeof item.id === 'number') {
                    arr.push(item.id)
                }
            })

            const { data } = await this.$fetch.post(
                `/api/directory-article/getDataByIds`,
                {
                    ids: arr
                }
            );

            data.forEach((item) => {

                item.list = item.list.slice(0, 10)

                this.leadsInfos.forEach((info, index) => {
                    if (item.directoryId === info.id) {
                        this.$set(this.leadsInfos[index], 'list', this.formatList(item.list))
                    }
                })
                this.linksInfos.forEach((info) => {
                    if (item.directoryId === info.id) {
                        this.$set(info, 'list', this.formatList(item.list))
                    }
                })
            })
        },

        handleToTodayFocus() { },





        handleBannerClick(item) {
            window.open(item.linkUrl);
        },

        formatList(sorts) {
            return sorts.map(({ article, ...others }) => {
                return {
                    article,
                    ...others,
                    ...article,
                };
            });
        },

        handleTopic(name) {
            this.$router.push({
                name
            })
        }
    },
};
</script>

<style lang="less" scoped>
.home-focus {
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}

.home-content {
    width: 100%;
    display: flex;
    flex-direction: row;

    .home-content-left {
        flex: 1;
        display: flex;
        flex-direction: column;

        .content-item {
            margin-top: 20px;
            padding: 25px;
            background: #fff;
            flex: 1;

            .content-item-header {
                border-bottom: 1px solid #efefef;
                display: flex;
                flex-direction: row;
                padding-bottom: 14px;

                .cms-news-title {
                    margin-right: 36px;
                }
            }

            .content-item-content {
                padding-top: 20px;
                width: 100%;
                padding: 0;
            }


            .another-link-bg {
                width: 100%;
                height: auto;
                margin-top: 20px;
                margin-bottom: 10px;

                img {
                    width: 100%;
                }
            }
        }


    }

    .home-content-right {
        width: 33.3%;
        margin-top: 20px;
        min-height: 800px;
        max-height: fit-content;
        margin-left: 20px;
        background: #fff;

    }
}

.vip {
    margin-top: 20px;
    padding: 28px 23px;
    width: 100%;
    height: 196px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    background: #fff;
    box-sizing: border-box;

    .vip-content {
        width: 274px;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        margin-right: 18px;
    }

    .vip-desc {
        background-image: url(./assets/vip1.png);
    }

    .vip-docs {
        background-image: url(./assets/vip2.png);
    }

    .vip-video {
        background-image: url(./assets/vip3.png);
    }

    .vip-result {
        background-image: url(./assets/vip4.png);
        margin-right: 0;
    }
}

.cms-news-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;

    color: #333333;
    height: 36px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    cursor: pointer;

    &.active {
        font-size: 25px;
    }
}





.home.is-mobile {
    .home-focus {
        flex-direction: column;
    }

    .vip {
        padding: 0;
        margin-top: 0;
        flex-direction: column;
        flex-direction: row;
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
        margin-bottom: 6px;

        .vip-content {
            margin-bottom: 4px;
            background-size: contain;
            height: auto;
            margin-right: 2px;
            width: calc(50% - 4px);

        }

    }

    .content-item {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        padding: 4px 20px;

        .content-item-header {
            padding-bottom: 4px;
        }


        .cms-news-title {
            font-size: 20px;

            &.active {
                color: #3268a8;

            }
        }
    }

    .content-item-content {
        padding-top: 0px;
    }

}
</style>
